<%@ page import="cn.edu.lingnan.pojo.Student" %>
<%@ page import="java.util.List" %>
<%@ page language="java" isThreadSafe="true" pageEncoding="utf8" %>
<html lang="en">
<head>
    <title>新增学生</title>
    <!-- 引入Vue.js -->
    <script src="../../ststic/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../ststic/js/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../ststic/js/element-ui/lib/index.js"></script>
<%--    <script src="../../ststic/js/main.js"></script>--%>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-header >
                <div style="float: right; font-size: 15px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 10px"></i>
                        <el-dropdown-menu>
                            <el-dropdown-item><a href="/loginout" style="text-decoration: none">
                                退出</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>&nbsp</span>
                    管理员
                </div>
                <span>岭南师范学院计算机与智能教育学院社团管理系统</span>
            </el-header>
        </el-header>
        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '2']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-edit-outline"></i>管理</template>
                        <el-menu-item index="1-1">
                            <i class="el-icon-user-solid"></i><el-link href="/student/queryAllStu">学生管理</el-link>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <i class="el-icon-paperclip"></i><el-link href="/club/queryAllClub">社团管理</el-link>
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <i class="el-icon-suitcase"></i><el-link href="/queryAllStu">职位管理</el-link>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tag>新增学生</el-tag>
                <el-form id="form" ref="form" :rules="rules" :model="form" label-width="80px" action="/newStu">
                    <el-form-item label="姓名" prop="name" >
                        <el-input v-model="form.name" show-word-limit maxlength="5" name="sname"
                                  clearable style="width: 300px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input style="width: 300px" type="password" v-model="form.pass" autocomplete="off"
                                  name="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input style="width: 300px" type="password" v-model="form.checkPass" autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">确定</el-button>
                        <el-button onclick=window.location.href='/student/queryAllStu'>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form.checkPass !== '') {
                        this.$refs.form.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                form: {
                    name: '',
                    pass: '',
                    checkPass: ''
                },
                rules:{
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            submitForm() {
                document.getElementById("form").submit();
            }
        }
    })
</script>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
        width:200px;

    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        /*text-align: center;*/
        line-height: 160px;
    }
    body > .el-container {
        margin-bottom: 40px;
    }
    body{
        padding: 0;
        margin: 0;
    }
</style>
</html>